<template>
	<view class="a-swiper-dot">
		<cu-custom :isBack="true">
			<block slot="backText">{{$t('register')}}</block>
		</cu-custom>
		<view class="bg-white padding">
			<view class="cu-steps">
				<view class="cu-item " :class="[index > numStep ? '':'text-olive']" v-for="(item,index) in numStepList"
					:key="index">
					<text class="num" :data-index="index + 1"></text> <text style="color:#666666">{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="bg-white padding-sm">
			<view v-if="numStep == 0">
				<!-- #ifdef MP-WEIXIN  -->
				<view class="padding content ">
					<!-- 需要你的授权 -->
					<view class="cuIcon-infofill text-df text-orange"><text
							class="margin-left-xs  ztnCustom-color-grey">{{$t('need')+$t('authorize')}}</text>
					</view>
					<view class="text-gray text-sm flex">
						<text class="text-cut margin-top-xs">
							<text>{{$t('publicInfoTip')}}</text>
						</text>
					</view>
					<view class="text-gray text-sm flex">
						<text class="text-cut margin-top-xs">
							<!-- 为了提供更好的服务，请在稍后的授权提示中点击允许  -->
							<text>{{$t('clickAllowTip')}}</text>
						</text>
					</view>
				</view>

				<view class="padding action">
					<checkbox-group @change="checkboxChange">
						<checkbox class="round olive margin-right" value="agree"></checkbox>
						<!-- 阅读并同意以下协议 服务协议 -->
						<text class="text-df">{{$t('readAndAgreeProtocolTip')}}<text class="text-blue"
								style="text-indent:2em;" @tap="privacyPolicy">
								{{$t('agree')}}</text></text>
					</checkbox-group>
				</view>

				<view class="padding flex flex-direction margin-top">
					<!-- 获取 -->
					<button v-if="disabledGetUserInfo" class="cu-btn round bg-green margin-tb-sm lg" disabled
						type="">{{$t('get')}}</button>
					<button v-else class="cu-btn round bg-green margin-tb-sm lg" open-type="getUserInfo"
						@getuserinfo="getUserInfo">{{$t('get')}}</button>
				</view>
				<!--  #endif -->
				<!--  #ifdef H5 || APP-PLUS  -->
				<view class="padding flex flex-direction margin-top">
					<!-- 同意 -->
					<button class="cu-btn round bg-green margin-tb-sm lg" @tap="agreeProtocol">{{$t('agree')}}</button>
				</view>
				<!--  #endif -->
			</view>

			<view v-if="numStep == 1">
				<view class="padding content ">
					<!-- 请设置常用的联系方式-->
					<view class="cuIcon-infofill text-df text-orange"><text
							class="margin-left-xs  ztnCustom-color-grey">{{$t('commonContactInfoTip')}}</text>
					</view>
					<view class="text-gray text-sm flex">
						<text class="text-cut margin-top-xs">
							<!-- 验证码没收到? 60秒后可再次获取 -->
							<text>{{$t('acceptCodeFailTip')}}</text>
						</text>
					</view>
				</view>
				<view class="cu-list menu card-menu margin-top solid-bottom ">
					<view class="cu-item">
						<view class="action flex" v-if="useEmailRegister">
							<text class="cuIcon-mail text-xxl text-olive margin-right-sm"></text>
							<!-- 请输入电子邮箱 -->
							<input id="emailInput" @input='changeEmailInput' :adjust-position="true" :focus="true"
								maxlength="300" cursor-spacing="10" :value="email" :placeholder="$t('email')"
								 class="text-lg" />
						</view>
						<view class="action flex" v-else>
							<text class="cuIcon-phone text-xxl text-olive margin-right-sm"></text>
							<!-- 请输入手机号码 -->
							<input id="phoneNumberInput" @input='changePhoneNumberInput' :adjust-position="true"
								:focus="true" maxlength="300" cursor-spacing="10" :value="phoneNumber"
								:placeholder="$t('phoneNumber')" 
								class="text-lg" />
						</view>
					</view>
				</view>

				<view class="cu-list menu card-menu margin-top solid-bottom ">
					<view class="cu-item">
						<view class="action">
							<!-- 请输入验证码 -->
							<input id="verificationCodeInput" @input='changeVerificationCodeInput'
								:adjust-position="true" maxlength="300" cursor-spacing="10" :value="verificationCode"
								:placeholder="$t('verificationCode')"
								class="text-lg" />
						</view>
						<view class="action">
							<!-- 秒 -->
							<button v-if="isCountDown"
								class="cu-btn bg-green shadow">{{verificationCodeBtn}}{{$t('seconds')}}</button>
							<button v-else class="cu-btn bg-green shadow"
								@tap="obtainVerificationCode">{{verificationCodeBtn}}</button>
						</view>
					</view>
				</view>

				<view v-if="enablePhoneRegister" class="margin-top text-sm text-olive" style="margin-left:60rpx"
					@tap="changeRegisterWay">{{phoneRegisterText}}</view>

				<view class="padding flex flex-direction margin-top">
					<button v-if="disabledNextStep" class=" cu-btn round bg-green margin-tb-sm lg" disabled
						type="">{{$t('next')}}</button>
					<button v-else class=" cu-btn round bg-green margin-tb-sm lg"
						@tap="nextStep">{{$t('next')}}</button>
				</view>
			</view>

			<view v-if="numStep == 2">
				<view class="padding content">
					<!-- 规范 -->
					<view class="cuIcon-infofill text-df text-orange"><text
							class="margin-left-xs  ztnCustom-color-grey">{{$t('rule')}}</text></view>
					<view class="text-gray text-sm flex">
						<text class="text-cut margin-top-xs">
							<!-- 输入的用户名不为空,最短为 4 个字符 -->
							<text>{{$t('userNameRulesTip')}}</text>
						</text>
					</view>
					<view class="text-gray text-sm flex">
						<text class="text-cut margin-top-xs">
							<!-- 输入的密码不为空,最短为 6 个字符 -->
							<text>{{$t('passwordRulesTip')}}</text>
						</text>
					</view>
				</view>

				<view class="cu-list menu card-menu margin-top solid-bottom ">
					<view class="cu-item">
						<view class="action flex">
							<text class="cuIcon-peoplefill text-xxl text-olive margin-right-sm "></text>
							<!-- 请输入用户名 -->
							<input id="userNameInput" @input='changeUserNameInput' :adjust-position="true" :focus="true"
								maxlength="300" cursor-spacing="10" :value="userName"
								:placeholder="$t('user')+$t('name')"
								placeholder-style='color:#aaaaaa;letter-spacing:2px;' class="text-lg" />
						</view>
						<view class="action">
						</view>
					</view>
				</view>

				<view class="cu-list menu card-menu margin-top solid-bottom ">
					<view class="cu-item ">
						<view class="action flex">
							<text class="cuIcon-lock text-xxl text-olive margin-right-sm "></text>
							<!-- 请输入密码 -->
							<input id="passwordInput" @input='changePasswordInput' type="password"
								:adjust-position="false" maxlength="300" cursor-spacing="10" :value="password"
								:placeholder="$t('password')" placeholder-style='color:#aaaaaa;letter-spacing:2px;'
								class="text-lg" />
						</view>
					</view>
				</view>

				<view class="cu-list menu card-menu margin-top solid-bottom ">
					<view class="cu-item ">
						<view class="action flex">
							<text class="cuIcon-lock text-xxl text-olive margin-right-sm "></text>
							<!-- 请再次输入密码 -->
							<input id="passwordInput" type="password" @input='changeAgainPasswordInput'
								:adjust-position="false" maxlength="300" cursor-spacing="10" :value="againPassword"
								:placeholder="$t('password')" placeholder-style='color:#aaaaaa;letter-spacing:2px;'
								class="text-lg" />
						</view>
					</view>
				</view>

				<view class="padding flex flex-direction margin-top">
					<button v-if="disabledNextToEnd" class=" cu-btn round bg-green margin-tb-sm lg" disabled
						type="">{{$t('next')}}</button>
					<button v-else class=" cu-btn round bg-green margin-tb-sm lg"
						@tap="nextStepToEnd">{{$t('next')}}</button>
				</view>
			</view>

			<view v-if="numStep == 3" class="padding-xl">
				<view class="cu-modal show">
					<view class="cu-dialog" style="width:400rpx">
						<view
							:class="[isRegisterSuccess?'cuIcon-roundcheckfill text-green':'cuIcon-roundclosefill text-red']"
							class="padding-top-xl" style="height:220rpx;font-size: 120rpx;">
						</view>
						<view class="cu-bar bg-white">
							<view class="action margin-0 flex-sub  solid-left" @tap="hideModal"
								:data-status="isRegisterSuccess?'success':'fail'"><text
									class="text-lg">{{isRegisterSuccess? $t('register')+$t('success') : $t('again')+$t('register') }}</text>
							</view>
							<!-- '注册成功':'注册失败,请重新注册' -->
						</view>
					</view>
					<text class="cuIcon-roundclose text-white"
						style="position: absolute;top:30%;left:80%;font-size:50rpx;"
						:data-status="isRegisterSuccess?'success':'fail'" @tap="hideModal"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		showToast
	} from '@/util/toast.js'
	import * as authUserApi from '@/api/auth/authUserApi.js'
	import * as storage from '@/util/storage.js'
	export default {
		data() {
			return {
				numStepList: [],
				numStep: 0,
				disabledGetUserInfo: true,
				useEmailRegister: true,
				email: '',
				enablePhoneRegister: false,
				phoneRegisterText: '',
				phoneNumber: '',
				verificationCode: '',
				verificationCodeBtn: '',
				isCountDown: false,
				vCodeValue: '',
				disabledNextStep: true,
				userName: '',
				password: '',
				againPassword: '',
				disabledNextToEnd: true,
				isRegisterSuccess: false
			}
		},
		onLoad() {
			//#ifdef MP-WEIXIN
			this.$set(this.numStepList, 0, {
				name: this.$t('authorize') //微信授权
			})
			//#endif
			//#ifdef H5 || APP-PLUS
			this.$set(this.numStepList, 0, {
				name: this.$t('agree') //同意协议
			})
			//#endif
			this.$set(this.numStepList, 1, {
				name: this.$t('verificationCode') //验证码
			})
			this.$set(this.numStepList, 2, {
				name: this.$t('user') + this.$t('info') //用户信息
			})
			this.$set(this.numStepList, 3, {
				name: this.$t('success') //注册成功
			})
			this.enablePhoneRegister = storage.getEnablePhoneRegister()
			this.phoneRegisterText = this.$t('phoneNumber') + this.$t('register') //用手机获取验证码
			this.verificationCodeBtn = this.$t('get') + this.$t('verificationCode') //获取验证码
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		methods: {
			numSteps() {
				this.numStep = this.numStep == this.numStepList.length - 1 ? 0 : this.numStep + 1
			},
			checkboxChange() {
				this.disabledGetUserInfo = !this.disabledGetUserInfo
			},
			getUserInfo(e) {
				const userInfo = e.detail.userInfo
				if (userInfo == null) {
					return
				} else {
					this.numSteps()
					storage.setUserInfo(userInfo)
				}
			},
			agreeProtocol() {
				this.numSteps()
			},
			changeEmailInput(e) {
				const email = e.detail.value.replace(/\s/g, '')
				const verificationCode = this.verificationCode
				this.email = email
				this.disabledNextStep = email != '' && verificationCode != '' ? false : true
			},
			changePhoneNumberInput(e) {
				const phoneNumber = e.detail.value.replace(/\s/g, '')
				const verificationCode = this.verificationCode
				this.phoneNumber = phoneNumber
				this.disabledNextStep = phoneNumber != '' && verificationCode != '' ? false : true
			},
			changeVerificationCodeInput(e) {
				const verificationCode = e.detail.value.replace(/\s/g, '')
				const useEmailRegister = this.useEmailRegister
				const phoneNumber = this.phoneNumber
				const email = this.email
				let disabledNextStep
				if (useEmailRegister) {
					disabledNextStep = email != '' && verificationCode != '' ? false : true
				} else {
					disabledNextStep = phoneNumber != '' && verificationCode != '' ? false : true
				}
				this.verificationCode = verificationCode
				this.disabledNextStep = disabledNextStep
			},
			checkEmail(email) {
				const myreg =
					/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
				if (!myreg.test(email)) {
					return false;
				} else {
					return true;
				}
			},
			checkPhoneNumber(mobile) {
				if (!/^1[3|4|5|8][0-9]\d{8}$/.test(mobile)) {
					return false;
				} else {
					return true;
				}
			},
			countDown(countDown) {
				let interval = setInterval(() => {
					this.verificationCodeBtn = countDown--
					if (countDown == -1) {
						clearInterval(interval)
						this.verificationCodeBtn = this.$t('again') + this.$t('get') //"重新获取"
						this.isCountDown = false
					}
				}, 1000)
			},
			obtainVerificationCode() {
				const useEmailRegister = this.useEmailRegister
				useEmailRegister ? this.useEmailObtainVerifyCode() : this.usePhoneObtainVerifyCode()
			},
			useEmailObtainVerifyCode() {
				const email = this.email
				const companyId = storage.getCompanyId()
				if (this.checkEmail(email)) {
					const promise = authUserApi.obtainVerifyCode({
						email: email,
						registerType: 'email',
						companyId: companyId
					})
					this.obtainVerifyCode(promise)
				} else {
					showToast(this.$t('email') + this.$t('error'), 'none', 1000, false)
				}
			},
			usePhoneObtainVerifyCode() {
				const phoneNumber = this.phoneNumber
				const companyId = storage.getCompanyId()
				if (this.checkPhoneNumber(phoneNumber)) {
					const promise = authUserApi.obtainVerifyCode({
						phoneNumber: phoneNumber,
						registerType: 'phone',
						companyId: companyId
					})
					this.obtainVerifyCode(promise)
				} else {
					showToast(this.$t('phoneNumber') + this.$t('error'), 'none', 1000, false)
				}
			},
			obtainVerifyCode(promise) {
				let countDown = 60
				promise.then((res) => {
					if (res.data) {
						showToast(this.$t('send') + this.$t('verificationCode'), 'none', 1000, false)
						this.vCodeValue = res.data
						this.verificationCodeBtn = countDown
						this.isCountDown = true
						this.countDown(countDown)
					} else {
						showToast(this.$t('get') + this.$t('verificationCode') + this.$t('failure'), 'none', 1000,
							false)
					}
				})
			},
			nextStep() {
				const vCodeValue = this.vCodeValue
				const verificationCode = this.verificationCode
				if (vCodeValue == verificationCode) {
					this.numSteps()
				} else {
					showToast(this.$t('verificationCode') + this.$t('error'), 'none', 1000, false)
				}
			},
			changeRegisterWay() {
				const useEmailRegister = !this.useEmailRegister
				this.useEmailRegister = useEmailRegister
				this.phoneRegisterText = useEmailRegister ? this.$t('phoneNumber') + this.$t('register') : this.$t(
					'email') + this.$t('register')
			},
			changeUserNameInput(e) {
				const userName = e.detail.value.replace(/\s/g, '')
				const password = this.password
				const againPassword = this.againPassword
				this.userName = userName
				this.disabledNextToEnd = userName != '' && password != '' && againPassword != '' ? false : true
			},
			changePasswordInput(e) {
				const password = e.detail.value.replace(/\s/g, '')
				const userName = this.userName
				const againPassword = this.againPassword
				this.password = password
				this.disabledNextToEnd = userName != '' && password != '' && againPassword != '' ? false : true
			},
			changeAgainPasswordInput(e) {
				const againPassword = e.detail.value.replace(/\s/g, '')
				const userName = this.userName
				const password = this.password
				this.againPassword = againPassword
				this.disabledNextToEnd = userName != '' && password != '' && againPassword != '' ? false : true
			},
			nextStepToEnd() {
				const userName = this.userName
				const password = this.password
				const againPassword = this.againPassword
				const phoneNumber = this.phoneNumber
				const email = this.email
				const useEmailRegister = this.useEmailRegister
				if (userName.length < 4) {
					showToast(this.$t('userNameLeastLengthTip'), 'none', 1000, false)
				} else if (password.length < 6) {
					showToast(this.$t('passwordLeastLengthTip'), 'none', 1000, false)
				} else if (password != againPassword) {
					showToast(this.$t('password') + this.$t('different'), 'none', 1000, false)
				} else {
					let promise = useEmailRegister ? this.useEmailRegisterFun(userName, password, email) : this
						.usePhoneRegister(userName, password, phoneNumber)
					promise.then((res) => {
						if (res.data) {
							this.numSteps()
							this.isRegisterSuccess = true
						} else {
							if (res.code == '201') {
								showToast(this.$t('user') + this.$t('exist'), 'none', 1000, false)
							} else {
								this.numSteps()
								this.isRegisterSuccess = false
							}
						}
					})
				}
			},
			useEmailRegisterFun(userName, password, email) {
				return authUserApi.register({
					userName: userName,
					password: password,
					registerType: 'email',
					email: email,
					companyId: storage.getCompanyId()
				})

			},
			usePhoneRegister(userName, password, phoneNumber) {
				return authUserApi.register({
					userName: userName,
					password: password,
					registerType: 'phone',
					phoneNumber: phoneNumber,
					companyId: storage.getCompanyId()
				})
			},
			hideModal(e) {
				const status = e.currentTarget.dataset.status
				if (status == 'success') {
					uni.navigateBack({
						delta: 1
					})
				} else if (status == 'fail') {
					this.numSteps()
					this.disabledGetUserInfo = true
					this.phoneNumber = ''
					this.verificationCode = ''
					this.isCountDown = ''
					this.vCodeValue = ''
					this.disabledNextStep = true
					this.userName = ''
					this.password = ''
					this.againPassword = ''
					this.disabledNextToEnd = true
				}
			}

		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
